<template>
  <div>
    <el-row>
      <el-col :span="12">
        <title-line title="收货人信息" />
        <div class="ft-14">
          <p class="mt-10">收货人：{{ address && address.name }}</p>
          <p class="mt-10">联系电话：{{ address && address.mobile }}</p>
          <p class="mt-10">收货地址：{{ addressDetail || '暂无' }}</p>
        </div>
      </el-col>
      <el-col v-if="details && details.orderStatus === -1" :span="12">
        <title-line title="操作人信息" />
        <div class="ft-14">
          <p class="mt-10">操作人：{{ details.cancelOperator }}</p>
          <p class="mt-10">操作时间：{{ details.cancelTime }}</p>
          <p class="mt-10">备注：{{ details.cancelReason ? details.cancelReason : '暂无' }}</p>
        </div>
      </el-col>
      <el-col
        :span="12"
        v-else-if="
          details &&
          details.orderStatus == 10 &&
          details.addressUpdateApplyResponse &&
          details.addressUpdateApplyResponse.status != 1
        "
      >
        <title-line title="修改地址操作人信息" />
        <div class="ft-14">
          <p class="mt-10">操作人：{{ details.addressUpdateApplyResponse.dealUser }}</p>
          <p class="mt-10">操作时间：{{ details.addressUpdateApplyResponse.dealTime }}</p>
          <p class="mt-10">
            备注：{{
              details.addressUpdateApplyResponse.remark
                ? details.addressUpdateApplyResponse.remark
                : '暂无'
            }}
          </p>
        </div>
      </el-col>

      <el-col
        :span="12"
        v-else-if="
          details &&
          details.orderStatus == 10 &&
          details.addressUpdateApplyResponse &&
          details.addressUpdateApplyResponse.status == 1
        "
      >
        <title-line title="现收货人信息" />
        <div class="ft-14">
          <p class="mt-10">收货人：{{ details.newAddress.name }}</p>
          <p class="mt-10">联系电话{{ details.newAddress.mobile }}</p>
          <p class="mt-10">收货地址：{{ newAddressDetail || '暂无' }}</p>
          <p class="mt-10">地址修改申请时间: {{ details.newAddress.updatedTime }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'OrderItemInfo',
  props: {
    details: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {
    address() {
      return this.details?.address
    },
    addressDetail() {
      const { provinceName, cityName, districtName, detail } = this.details?.address ?? {}
      return `${provinceName}${cityName}${districtName}${detail}`
    },
    newAddressDetail() {
      const { provinceName, cityName, districtName, detail } = this.details?.newAddress ?? {}
      return `${provinceName}${cityName}${districtName}${detail}`
    }
  }
}
</script>
